<div data-target="panel-header" class="flex flex-col w-full mb-4">
  <div class="flex justify-center sm:justify-start flex-col sm:flex-row w-full flex-1 has-cover-photo:mt-0">
    <%= render Avo::ProfilePhotoComponent.new profile_photo: @profile_photo %>
    <div class="flex flex-col flex-1 w-full">
      <% if display_breadcrumbs? %>
        <div class="breadcrumbs text-center sm:text-left mb-2">
          <%= helpers.render_avo_breadcrumbs(separator: helpers.svg("chevron-right", class: "inline-block h-3 stroke-current relative top-[-1px] ml-1")) if Avo.configuration.display_breadcrumbs %>
        </div>
      <% end %>
      <div class="flex-1 flex flex-col xl:flex-row justify-between gap-1 grow-0">
        <div class="overflow-hidden flex flex-col">
          <% if name_slot? %>
            <%= name_slot %>
          <% else %>
            <%= render Avo::PanelNameComponent.new name: @name do |panel_name_component| %>
              <% panel_name_component.with_body do %>
                <% if @external_link.present? %>
                  <%= link_to @external_link, class: "text-gray-600 hover:text-gray-900 mt-1", title: helpers.t("avo.visit_record_on_external_path"), data: {tippy: :tooltip}, target: :_blank do %>
                    <%= helpers.svg "heroicons/outline/arrow-top-right-on-square", class: "ml-2 text-2xl h-4" %>
                  <% end %>
                <% end %>
                <% if @discreet_information.present? %>
                  <%= render Avo::DiscreetInformationComponent.new(payload: @discreet_information) %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
          <% if @description.present? %>
            <div class="text-sm tracking-normal font-medium text-gray-600 text-center sm:text-left" data-target="description">
              <%== @description %>
            </div>
          <% end %>
        </div>
        <% if tools.present? %>
          <div class="flex-1 w-full flex flex-col sm:flex-row xl:justify-end sm:items-end gap-2 mt-4 xl:mt-0" data-target="panel-tools">
            <%= tools %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
